~{define "components/jielong_user_list_demo"}~
<!-- 定义模板内容 -->

<!-- 加载需要的组件 -->
~{template "components/jielong_user_list_style" .}~
<template id="template-jielong-user-list-demo">
    <div class="jielong-user-list">
        <div class="jielong-list-item">
            <div class="jielong-list-item-title">
                <span class="jielong-list-item-title-number">01</span>
                <span class="jielong-list-item-title-name">张三(zhangsan)</span>
                <span class="jielong-list-item-title-auto">{{autoContent}}</span>
            </div>
        </div>
        <div class="jielong-list-item">
            <div class="jielong-list-item-title">
                <span class="jielong-list-item-title-number">02</span>
                <span class="jielong-list-item-title-name">李四(lisi)</span>
                <span class="jielong-list-item-title-auto">{{autoContent}}</span>
            </div>
        </div>
        <div class="jielong-list-item add" @click="logMessage">
            <div class="jielong-list-item-title">
                <span class="jielong-list-item-title-number">
                    <i class="el-icon-circle-plus-outline"></i>
                </span>
                <span class="jielong-list-item-title-name">
                    <span type="text" class="link">接龙</span>
                </span>
            </div>
        </div>
        <!-- <p>{{ message }}</p>
        <p>{{ localMessage }}</p>
        <el-button type="danger" class="" @click="logMessage">Log Message</el-button> -->
    </div>
</template>
<script>
    // 定义组件
    Vue.component('jielong-user-list-demo', {
        props: ['autoContent'],
        data: function () {
            return {
                localMessage: 'Hello from My Component!'
            };
        },
        template: '#template-jielong-user-list-demo',
        methods: {
            logMessage: function () {
                console.log(this.localMessage);
                this.$message.warning('发布接龙后才能添加');
            }
        }
    })
</script>
~{end}~